﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">This demo shows how to implement cascading comboboxes in jqxToolBar.
    </title>
    <meta name="description" content="This demo shows how to implement cascading comboboxes in jqxToolBar." />
    <link type="text/css" rel="Stylesheet" href="../../jqwidgets/styles/jqx.base.css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxtoolbar.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var countries = ['Japan', 'UK', 'USA'];

            var JapaneseCities = ['Kobe', 'Kyoto', 'Tokyo'];
            var UKCities = ['Brighton', 'Glasgow', 'London'];
            var USACities = ['Boston', 'Los Angeles', 'Minneapolis'];

            var combobox1, combobox1Min, combobox2, combobox2Min;

            $("#jqxToolBar").jqxToolBar({
                width: 500,
                height: 35,
                tools: 'combobox | combobox',
                initTools: function (type, index, tool, menuToolIninitialization) {
                    switch (index) {
                        case 0:
                            tool.jqxComboBox({
                                width: 150,
                                source: countries,
                                selectedIndex: 0,
                                promptText: "Select a country..."
                            });

                            if (menuToolIninitialization === false) {
                                combobox1 = tool;
                            } else {
                                combobox1Min = tool;
                            }
                            break;
                        case 1:
                            tool.jqxComboBox({
                                width: 150,
                                source: JapaneseCities,
                                selectedIndex: 0,
                                promptText: "Select a city..."
                            });

                            if (menuToolIninitialization === false) {
                                combobox2 = tool;
                            } else {
                                combobox2Min = tool;
                            }
                            break;
                    }
                }
            });

            combobox1.add(combobox1Min).on('select', function (event) {
                if (event.args) {
                    var country = event.args.item.label;
                    var source;

                    if (country === 'Japan') {
                        source = JapaneseCities;
                    } else if (country === 'UK') {
                        source = UKCities;
                    } else {
                        source = USACities;
                    }

                    combobox2.jqxComboBox({ source: source });
                    combobox2Min.jqxComboBox({ source: source });
                }
            });
        });     
    </script>
</head>
<body>
    <div id="jqxToolBar">
    </div>
</body>
</html>
